<script setup>
import Tabbar from '@/components/Layout/Tabbar.vue'
import { ref } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()

const tabbarIndex = ref(0)
// 接收当前点击的导航栏索引
const onChangeTabbar = (index) => {
  // console.log(index);
  tabbarIndex.value = index

}

// 根据 url跳转路径 修改相应的索引，后传回子组件
switch (route.path) {
  case '/home':
    tabbarIndex.value = 0
    break;
  case '/cart':
    tabbarIndex.value = 1
    break;
  case '/order':
    tabbarIndex.value = 2
    break;
  case '/my':
    tabbarIndex.value = 3
    break;
  default:
    tabbarIndex.value = 0
    break;
}
</script>

<template>
  <!-- 展示区 -->
  <RouterView />
  <!-- 导航区 -->
  <!-- 底部tabbar -->
  <Tabbar @changeTabbar="onChangeTabbar" :checkIndex="tabbarIndex"></Tabbar>
</template>

<style scoped lang="scss"></style>
